<template>
  <div>
    <el-dialog :model-value="visible" :close-on-click-modal="false" title="仓库选择" width="400" @close="cls">

      <el-table :data="tableData" style="width: 100%" border stripe ref="goodslist">
        <el-table-column type="selection" width="55" header-align="center" align="center" />
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column prop="id" label="仓库id" width="120" header-align="center" />
        <el-table-column prop="name" label="仓库名称" width="138" header-align="center" />
      </el-table>

      <div class="toolbar">
        <el-button type="primary" size="small" @click="choose">确定</el-button>
        <el-button size="small" @click="cls">取消</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script setup>

import { ref,onMounted } from "vue"
import { queryWarehouse } from "@/api/goods/list"
import { getUser } from "@/utils/session";
import { ElMessage } from "element-plus";

//声明属性
const props = defineProps({
  "visible": {
    type: Boolean,
    default: false
  }
})
//声明事件
const emits = defineEmits(["close", "choose"])

//声明同名引用
const goodslist = ref(null);

const tableData = ref([])


let data = {
  "eid": getUser().eid
}

//查询仓库名称
async function queryWarehouseName() {
  let res = await queryWarehouse(data);
  if (res.code == 200) {
    tableData.value = res.data
  }
}

//选择
function choose() {
  let rows = goodslist.value.getSelectionRows();
  if (rows.length == 0) {
    ElMessage({
      message: '保存商品',
      type: 'warning'
    })
    return
  }
  //将选中的商品传给父组件
  emits("choose", rows)
  //关闭
  cls()
}


//关闭窗口
function cls() {
  //抛出自定义事件
  emits("close");
}

onMounted(() => {
  queryWarehouseName()
})

</script >

<style scoped lang="scss">
.toolbar{
  margin-top: 10px;
}
</style>
